<template>
  <div class="page">
    <m-header :title="Recharge.recharge" :canback="Boolean(1)">
      <span @click="rechargeRecord">{{Recharge.recharge_record}}</span>
    </m-header>
    <section class="body">
      <div class="wrap">
        <!-- <div>
          来自
          <span style="color:#FF9F00">{{userInfo.username}}</span> 的分享
        </div>-->
        <div class="img-box">
          <!-- <p v-if="userInfo" class="url">{{api+'#'+'/register/'+uid+'/'+userInfo.mobile}}</p> -->
          <img class="img" :src="inviteSrc" alt />
          <div>{{Recharge.my_wallet_qrcode}}</div>

          <!-- <div>{{userInfo.credit2_url}}</div> -->
          <div>
            <input type="text" id="bar" readonly="readonly" v-model="userInfo.credit2_url" class="key" />
          </div>
          <div
            ref="copy"
            class="btn-origin"
            data-clipboard-target="#bar"
            data-clipboard-action="copy"
            @click="copy()"
          >{{Copy.copy}}</div>
        </div>
        <div style="color:#999">{{Recharge.notice}}</div>
        <!-- <div>AI-QuantAnt</div> -->
      </div>
    </section>
  </div>
</template>
<script>
import QRCode from "qrcode";
import { mapGetters } from "vuex";
import Clipborad from "clipboard";

export default {
  name: "invite",
  data() {
    return {
      inviteSrc: null,
      inviteUrl: null,
      Recharge: {},
      Copy: {},
      // num: "sd4f6s5d4f5s6d",
      copyBtn: null //存储初始化复制按钮事件
    };
  },
  mounted() {
    // console.log(this.lang.copy)
    // console.log(this.userInfo)
    this.Recharge = this.lang.Recharge;
    this.Copy = this.lang.copy;
    this.initData();
    let _This = this;
    this.copyBtn = new Clipborad(_This.$refs.copy);
  },
  computed: {
    ...mapGetters(["uid", "userInfo", "api", "lang"])
  },
  methods: {
    initData() {
      // console.log(this.userInfo)
      this.inviteUrl = this.userInfo.credit2_url;
      this.setCode(this.inviteUrl);
      // this.inviteUrl = "88888";

      // this.inviteUrl = location.href.split("#")[0] + "#" + "/register?uid=" + this.uid;
      // this.inviteUrl = process.env.API+process.env.PORT+'/dist/index.html#'+'/register?uid='+this.uid;
      // this.inviteUrl = this.api+'/dist/index.html#'+'/register?uid='+this.uid;
    },
    setCode(url) {
      QRCode.toDataURL(url)
        .then(url => {
          this.inviteSrc = url;
        })
        .catch(err => {
          console.error(err);
        });
    },
    copy() {
      let _This = this;
      this.copyBtn.on("success", function(e) {
        mui.toast(_This.Copy.s);
        e.clearSelection();
      });
      this.copyBtn.on("ereor", function(e) {
        mui.toast(_This.Copy.f);
      });
    },
    rechargeRecord() {
      this.$router.push({ name: "SaveRecord" });
    }
  }
};
</script>
<style lang="less" scoped>
@import "~link-less";
.body {
  color: #000;
  text-align: center;
  // background-image: url(../../../assets/images/szxz/share-bg.png);
  // background-size: 100% 100%;
  font-size: 30px;
  .wrap {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .title {
      font-size: 40px;
      color: @primary-color;
      margin-top: 5%;
    }
    .url {
      // margin-top: 75%;
      margin-bottom: 20px;
    }
    .img-box {
      margin: 20px 0;
      color: #999;
      .img {
        width: 50%;
      }
      .key {
        margin: 0;
        width: auto;
        padding: 33px 0;
        color: #ebaf1c;
        text-align: center;
        background: none;
        border: none;
      }
      .btn-origin {
        display: block;
        margin-bottom: 10px;
        margin: auto;
        padding: 10px 0;
        width: 68%;
        border-radius: 100px;
        color: #fff;
        background: #406ec3;
      }
      // position: absolute;
      // bottom: 20%;
      // left: 50%;
      //   .transform(translateX(-50%));
      // margin-top: 85%;
      // margin-top:
    }
    // @media screen and (max-height: 667px) {
    //   .img-box {
    //     position: absolute;
    //     bottom: 10%;
    //     left: 50%;
    //     .transform(translateX(-50%));
    //   }
    // }
  }
}
</style>
